import "./index.scss";

import type {HTMLAttributes} from "react";

function generateClassNames(classNames: Array<string | undefined | null>) {
    return classNames.filter(i => i?.trim()).join(" ");
}


export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
    loading?: boolean;
}

export default function Skeleton({loading = false, ...props}: SkeletonProps) {
    return loading ? (
        <div
            {...props}
            className={generateClassNames(["skeleton", props.className])}
        >
            <span className="skeleton-bar"/>
        </div>
    ) : (
        props.children
    );
}
